<script lang="ts" setup>
import { reactive, ref } from "vue";
import { getSearchProApi,getCategoryApi } from "@/api/pro"
import mytable from "@/myLib/mytable";


const columns = [
    {
        label: '商品编号',
        prop: 'proid',
        width: "180px"
    },
    {
        label: '商品名称',
        prop: 'proname',
        width: "500px"
    },
    {
        label: '价格',
        prop: 'originprice',
        width: "180px"
    },
    {
        label: '商品图片',
        prop: 'img1',
        width: "180px",
        type:"img"
    }
]

// 查询条件相关业务：

const queryData = reactive({});

// 1、获取分类的数据
const categorys = reactive([]);

const getCategory=()=>{
    getCategoryApi().then(res=>{
        if(res.data.code==="200"){
            categorys.push(...res.data.data);
        }
    })
};

getCategory();

// 2、查询函数
const tableRef = ref();
const queryFn=()=>{
    tableRef.value.getList();
}

const getProFn = () => getSearchProApi(queryData);

</script>

<template>
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
         <el-form-item label="商品分类">
            <el-select v-model="queryData.category" placeholder="分类" clearable>
                <el-option v-for="item in categorys" :label="item" :value="item" />
            </el-select>
        </el-form-item>
        <el-form-item label="搜索关键字">
            <el-input v-model="queryData.search" placeholder="请输入搜索的关键字" clearable />
        </el-form-item>
       <el-form-item>
            <el-button type="primary" @click="queryFn">查询</el-button>
        </el-form-item>
    </el-form>
    <hr />
    <mytable ref="tableRef" :immediate="false" :getDataApi="getProFn" :columns="columns" ></mytable>
</template>

<style lang="scss" scoped></style>
